<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    body {
      background: #23384e;
      font: 12px/1.5 \5fae\8f6f\96c5\9ed1;
    }

    .search,
    .search .inner-box,
    .search .box,
    .search .select,
    .search a {
      background: url(../images/search.jpg) no-repeat;
    }

    .search,
    .search .box,
    .search .inner-box {
      height: 34px;
    }

    .search {
      position: relative;
      width: 350px;
      margin: 10px auto;
    }

    .search .box {
      background-position: right 0;
    }

    .search .inner-box {
      background-repeat: repeat-x;
      background-position: 0 -34px;
      margin: 0 20px 0 40px;
    }

    .search .select {
      float: left;
      color: #fff;
      width: 190px;
      height: 22px;
      border: none;
      cursor: pointer;
      margin-top: 4px;
      line-height: 22px;
      padding-left: 10px;
      background-position: 0 -68px;
    }

    .search a {
      float: left;
      width: 80px;
      height: 24px;
      color: #333;
      letter-spacing: 4px;
      line-height: 22px;
      text-align: center;
      text-decoration: none;
      background-position: 0 -90px;
      margin: 4px 0 0 10px;
    }

    .search a:hover {
      color: #f60;
      background-position: -80px -90px;
    }

    .search ul {
      position: absolute;
      top: 26px;
      left: 40px;
      color: #fff;
      width: 198px;
      background: #2b2b2b;
      border: 1px solid #fff;
      display: none;
    }

    .search ul li {
      height: 25px;
      line-height: 24px;
      cursor: pointer;
      padding-left: 10px;
      margin-bottom: -1px;
      border-bottom: 1px dotted #fff;
    }

    .search ul li:hover,
    .search ul li.active {
      background: #8b8b8b;
    }
  </style>
</head>

<body>
  <div class="search">
    <div class="box">
      <div class="inner-box">
        <input type="text" id="keyword" class="select" autocomplete="off" placeholder="请选择游戏名称">
        <a href="#">搜索</a>
      </div>
    </div>
    <ul class="list">
      <li>地下城与勇士</li>
      <li>魔兽世界（国服）</li>
      <li>魔兽世界（台服）</li>
      <li>热血江湖</li>
      <li>大话西游II</li>
      <li>QQ幻想世界</li>
    </ul>
  </div>

  <script>
    /*
            实现的功能：
                【1】搜索框获取焦点的时候 显示下拉下单
                    【1】获取元素
                【2】搜索框失去焦点时候 隐藏下拉菜单

                这两个功能只有在获取焦点的时候才会有用
                【3】按下鼠标的上下键 可以动态选中 li元素（给li元素添加 active 这个class名）
                【4】当按下 enter键的时候，把拥有 activeclass名的元素的内容 赋值给搜索框
         */

    let keyword = document.querySelector("#keyword")
    let list = document.querySelector(".list")
    let lis = document.querySelectorAll(".list li")


    //【1】搜索框获取焦点的时候 显示下拉下单
    keyword.onfocus = function () {
      list.style.display = "block"


      // 【3】 按下鼠标的上下键 可以动态选中 li元素（ 给li元素添加 active 这个class名）
      var j = 0;
      window.onkeydown = function (e) {
        // console.log(e.keyCode);
        if (e.keyCode === 38) { //点击按下上键的时候
          lis.forEach(function (item, i) {
            item.className = ""
          })
          j--;
          if (j < 0) {
            j = 0
            lis[0].className = "active"
          }
          lis[j].className = "active"
        } else if (e.keyCode === 40) { //点击按下下键的时候，就进入到li这边
          lis.forEach(function (item, i) {
            item.className = ""
          })
          lis[j].className = "active"
          j++
          if (j > 5) {
            j = 5
            lis[5].className = "active"
          }
        }

        // 【4】当按下 enter键的时候，把拥有 activeclass名的元素的内容 赋值给搜索框
        if (e.keyCode === 13) { //13为enter键盘
          if (lis[j].className = "active") {
            // console.log(lis[j].innerHTML);
            keyword.value = lis[j - 1].innerHTML
            keyword.blur()
          }
        }
      }
    }
    //【2】搜索框失去焦点时候 隐藏下拉菜单
    keyword.onblur = function () {
      list.style.display = "none"
    }
  </script>
</body>

</html>